{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "493d65e0",
   "metadata": {},
   "source": [
    "# 基于python的数据大屏实现"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "6deaaf3b",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "from streamlit_echarts import st_echarts\n",
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from streamlit_echarts import st_pyecharts\n",
    "import pandas as pd\n",
    "import numpy as np"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "7349418a",
   "metadata": {},
   "outputs": [],
   "source": [
    "a=pd.read_csv(r\"D:\\try\\shoes.csv\")\n",
    "a.sales=a.sales.str.replace(\"人付款\",\"\").astype(int)\n",
    "#求出各个商品的销售额并把它并入到原始数据框中去\n",
    "z1=a.sales*a.price\n",
    "z1.name=\"xse\"\n",
    "a=pd.concat([a,z1],axis=1)#给序列命名之后添加入数据框就会直接以序列名作为列标\n",
    "location=a.location.str.split(\" \",expand=True)\n",
    "a[\"province\"]=location[0]\n",
    "a[\"city\"]=location[1]"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "dff4ff8c",
   "metadata": {},
   "source": [
    "## 数据可视化展示的思路\n",
    "\n",
    "* 首先每一行的意义\n",
    "\n",
    "* 分析的目的性。对于商业分析而言，销售量，销售额始终是最优先需要展示的。各个部分的销售额，销售额的变化。与销售额密切相关的量，比如价格，销售量，点击行为，转化率....\n",
    "\n",
    "* 特征与实体的关系。特征的分类，特征的意义在于解释销售额的来源，特征更像是x，销售额是y,商业上通常是通过调整x来实现y的最大化\n",
    "\n",
    "\n",
    "* 以男鞋数据为例。每一行是搜索结果中的某个商品，因此所有size都是求商品数量，不同的groupby无非就是求不同特征相的商品数量。数据里给出了每个商品的销售量与价格，显然能获取到商品的销售额，因此一般来说我们所有的分析与可视化展现就应该仅仅围绕销售额和销售量展开。这个数据里，商品是一个天然的实体，有非常多的特征是从属于商品这个实体的；另外的实体就是店铺，但是我们可以看到数据里没有直接给出任何店铺的特征，但是店铺拥有商品，显然通过对商品的统计可以获取对应的店铺特征；此外商品的特征有几大类：首先是材质，风格，颜色等等商品的固有特征，此外则是省市这样的地域特征，然后是价格这个与销售额直接相关的特征(注意有时价格从属于订单而不是商品)。\n",
    "\n",
    "* 基于以上考虑，我们很容易能够得到，如果希望从整体上展示这个数据整体情况应该从以下几个方面入手：销量的地域分布；；店铺销量排名；不同类型男鞋的销量；价格与销量"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "d2416607",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['_id.$oid', 'info.上市年份季节', 'info.上市时间', 'info.产品名称', 'info.低帮鞋品名',\n",
       "       'info.功能', 'info.吊牌价', 'info.品牌', 'info.图案', 'info.场合', 'info.外底材料',\n",
       "       'info.季节', 'info.尺码', 'info.帮面内里材质', 'info.帮面材质', 'info.性别',\n",
       "       'info.是否商场同款', 'info.是否瑕疵', 'info.款号', 'info.款式', 'info.流行元素',\n",
       "       'info.真皮材质工艺', 'info.细分风格', 'info.货号', 'info.跟底款式', 'info.运动系列',\n",
       "       'info.运动鞋科技', 'info.适合路面', 'info.适用对象', 'info.销售渠道类型', 'info.闭合方式',\n",
       "       'info.靴子品名', 'info.靴筒内里材质', 'info.靴筒材质', 'info.靴筒高度', 'info.鞋制作工艺',\n",
       "       'info.鞋垫材质', 'info.鞋头款式', 'info.鞋底材质', 'info.鞋码', 'info.鞋跟高',\n",
       "       'info.鞋面内里材质', 'info.鞋面材质', 'info.颜色分类', 'info.风格', 'itemid',\n",
       "       'location', 'nick', 'price', 'sales', 'title', 'url', 'xse', 'province',\n",
       "       'city'],\n",
       "      dtype='object')"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.columns"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "1490122c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "_id.$oid          0\n",
       "info.上市年份季节    4483\n",
       "info.上市时间      4986\n",
       "info.产品名称      4978\n",
       "info.低帮鞋品名     4512\n",
       "dtype: int64"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.isnull().sum().head()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "83227e97",
   "metadata": {},
   "source": [
    "## 地域的数量分布\n",
    "\n",
    "* 此数据里地域的销售额差异太大，已经不方便用地图展示了，因此这里只是展示商品数量\n",
    "* 请注意各种可视化方案的容量和能忍受的数量差异的大小\n",
    "\n",
    "\n",
    "\n",
    "* classwork 1\n",
    "\n",
    "* 分布求出各个省与直辖市的商品数量；浙江省下属各个市的商品数量\n",
    "\n",
    "* 在页面上可视化上述两个地域数量分布\n",
    "\n",
    "* 实现下钻：点击全国地图中的省则显示对应省的各个市的商品数量"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "id": "91b6a7d3",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "province\n",
       "上海     154\n",
       "北京     339\n",
       "吉林       1\n",
       "四川       4\n",
       "安徽      24\n",
       "山东      44\n",
       "山西      39\n",
       "广东     284\n",
       "江苏     120\n",
       "江西      42\n",
       "河北      86\n",
       "河南     393\n",
       "浙江    2470\n",
       "湖北      27\n",
       "福建     952\n",
       "贵州       2\n",
       "辽宁       3\n",
       "重庆       3\n",
       "dtype: int64"
      ]
     },
     "execution_count": 20,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.groupby(\"province\").size()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "id": "6406c7b2",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "city\n",
       "温州    1275\n",
       "丽水     938\n",
       "湖州     118\n",
       "杭州     107\n",
       "温岭      10\n",
       "宁波       8\n",
       "嘉兴       4\n",
       "金华       4\n",
       "衢州       3\n",
       "台州       2\n",
       "绍兴       1\n",
       "dtype: int64"
      ]
     },
     "execution_count": 28,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a[a[\"province\"]==\"浙江\"].groupby(\"city\").size().sort_values(ascending=False)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "45156dc7",
   "metadata": {},
   "source": [
    "## 店铺销量排名与帕累托图\n",
    "\n",
    "* 帕累托图，是“二八原则”的图形化体现。帕累托图分析可以帮助从多项因素中快速科学地找出最重要因素，便于研究者提出更有针对性的建议和解决措施\n",
    "\n",
    "\n",
    "\n",
    "* classwork 2\n",
    "\n",
    "* 获取各个店铺的销售额，并从大到小排序；获取店铺销售额的累计比率增长情况\n",
    "\n",
    "* 在页面上实现帕累托图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "cd3f8fcf",
   "metadata": {},
   "outputs": [],
   "source": [
    "nick_xse=a.groupby(\"nick\").xse.sum().sort_values(ascending=False)\n",
    "nick_xse=nick_xse[nick_xse>10000]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "48f60c78",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "nick\n",
       "意尔康皮鞋旗舰店           0.721249\n",
       "意尔康男鞋旗舰店           0.881916\n",
       "意尔康品牌店             0.905114\n",
       "乙方乙方88888          0.922979\n",
       "吸引力xl              0.931871\n",
       "稚尚鞋类专营店            0.940513\n",
       "夏克利2013            0.947934\n",
       "因为有所以更好            0.953603\n",
       "特别20150728         0.958676\n",
       "新华鞋业168            0.963414\n",
       "艾尚美梦工厂             0.967519\n",
       "甜美果果t              0.970992\n",
       "淡忘ing1027          0.974322\n",
       "慢慢大王93             0.977412\n",
       "zhanghaihuihiok    0.980400\n",
       "chen356307796      0.983363\n",
       "迪伯伦男鞋专家            0.986146\n",
       "六六八鞋城              0.988746\n",
       "tb877572_00        0.991205\n",
       "温州女鞋店铺             0.993555\n",
       "csdawww            0.995752\n",
       "榴莲的淡香              0.997881\n",
       "奥儿尼                1.000000\n",
       "Name: xse, dtype: float64"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "nick_xse_cum=nick_xse.cumsum()/nick_xse.sum()\n",
    "nick_xse_cum"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 32,
   "id": "07b80350",
   "metadata": {},
   "outputs": [],
   "source": [
    "nick_xse=a.groupby(\"nick\").xse.sum().sort_values(ascending=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 35,
   "id": "19e87691",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "nick\n",
       "意尔康皮鞋旗舰店     3558446.0\n",
       "意尔康男鞋旗舰店      792685.0\n",
       "意尔康品牌店        114452.0\n",
       "乙方乙方88888      88144.0\n",
       "吸引力xl          43870.0\n",
       "               ...    \n",
       "yek108             0.0\n",
       "热血无极限              0.0\n",
       "燕轩品牌店              0.0\n",
       "爱鞋坊2012            0.0\n",
       "龙凤吉祥4249           0.0\n",
       "Name: xse, Length: 482, dtype: float64"
      ]
     },
     "execution_count": 35,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "nick_xse"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "id": "15e7f3f3",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "nick\n",
       "意尔康皮鞋旗舰店     0.647391\n",
       "意尔康男鞋旗舰店     0.791604\n",
       "意尔康品牌店       0.812427\n",
       "乙方乙方88888    0.828463\n",
       "吸引力xl        0.836444\n",
       "               ...   \n",
       "yek108       1.000000\n",
       "热血无极限        1.000000\n",
       "燕轩品牌店        1.000000\n",
       "爱鞋坊2012      1.000000\n",
       "龙凤吉祥4249     1.000000\n",
       "Name: xse, Length: 482, dtype: float64"
      ]
     },
     "execution_count": 37,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "nick_xse.cumsum()/nick_xse.sum()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4fee40dc",
   "metadata": {},
   "source": [
    "## 价格与销量\n",
    "\n",
    "* 价格作为一个连续变量，通常用分段分组统计会更加合理\n",
    "\n",
    "\n",
    "\n",
    "* classwork3\n",
    "\n",
    "* 请求出各个区间的商品数量以及商品销量\n",
    "\n",
    "* 请在页面上通过线图展现不同价格区间的数量与销量，注意这是双数值轴"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "f781f29a",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0       269.0\n",
       "1       199.0\n",
       "2       148.0\n",
       "3       158.0\n",
       "4       279.0\n",
       "        ...  \n",
       "4982    119.0\n",
       "4983    253.0\n",
       "4984    187.0\n",
       "4985    177.0\n",
       "4986    213.0\n",
       "Name: price, Length: 4987, dtype: float64"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.price"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "id": "29561ca0",
   "metadata": {},
   "outputs": [],
   "source": [
    "#np.linspace(a.price.min(),a.price.max(),500)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "id": "27d192df",
   "metadata": {},
   "outputs": [],
   "source": [
    "y1,x1=np.histogram(a.price.values,np.linspace(a.price.min(),a.price.max(),500),weights=a.sales.values)#商品销量"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "id": "d3858cb9",
   "metadata": {},
   "outputs": [],
   "source": [
    "y2,x2=np.histogram(a.price.values,np.linspace(a.price.min(),a.price.max(),500))#商品数量"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "id": "7faa7df1",
   "metadata": {},
   "outputs": [],
   "source": [
    "data1=[]\n",
    "for i in range(0,len(y1)):\n",
    "    data1.append([x1[i],y1[i]])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 28,
   "id": "ccaa3592",
   "metadata": {},
   "outputs": [],
   "source": [
    "data2=[]\n",
    "for i in range(0,len(y2)):\n",
    "    data1.append([x2[i],y2[i]])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "id": "644b3b26",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "500"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "len(x2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "id": "d5748116",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "499"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "len(y2)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 51,
   "id": "1ae78d68",
   "metadata": {},
   "outputs": [],
   "source": [
    "data1=[]\n",
    "for i in range(0,len(y1)):\n",
    "    data1.append([x1[i+1],y1[i]])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 55,
   "id": "5548ae5b",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[[30.892184368737475, 686], [44.88436873747495, 0]]"
      ]
     },
     "execution_count": 55,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data1[0:2]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "16b89ed6",
   "metadata": {},
   "outputs": [],
   "source": [
    "data1=[]\n",
    "for i in range(0,len(y1)):\n",
    "    data1.append([x1[i+1],y1[i]])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "41465951",
   "metadata": {},
   "outputs": [],
   "source": [
    "#data1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 43,
   "id": "e59fa94b",
   "metadata": {},
   "outputs": [],
   "source": [
    "#x1"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7868c98d",
   "metadata": {},
   "source": [
    "## 男鞋各个特征下的销量\n",
    "\n",
    "* classwork 4\n",
    "\n",
    "* \"info.鞋面材质\" \"info.风格\" \"info.流行元素\" 下的销售额\n",
    "\n",
    "* 做饼图可视化到页面（饼图的容量很小，建议去掉尾部特征）"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "id": "61bc8c7d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['_id.$oid', 'info.上市年份季节', 'info.上市时间', 'info.产品名称', 'info.低帮鞋品名',\n",
       "       'info.功能', 'info.吊牌价', 'info.品牌', 'info.图案', 'info.场合', 'info.外底材料',\n",
       "       'info.季节', 'info.尺码', 'info.帮面内里材质', 'info.帮面材质', 'info.性别',\n",
       "       'info.是否商场同款', 'info.是否瑕疵', 'info.款号', 'info.款式', 'info.流行元素',\n",
       "       'info.真皮材质工艺', 'info.细分风格', 'info.货号', 'info.跟底款式', 'info.运动系列',\n",
       "       'info.运动鞋科技', 'info.适合路面', 'info.适用对象', 'info.销售渠道类型', 'info.闭合方式',\n",
       "       'info.靴子品名', 'info.靴筒内里材质', 'info.靴筒材质', 'info.靴筒高度', 'info.鞋制作工艺',\n",
       "       'info.鞋垫材质', 'info.鞋头款式', 'info.鞋底材质', 'info.鞋码', 'info.鞋跟高',\n",
       "       'info.鞋面内里材质', 'info.鞋面材质', 'info.颜色分类', 'info.风格', 'itemid',\n",
       "       'location', 'nick', 'price', 'sales', 'title', 'url', 'xse', 'province',\n",
       "       'city'],\n",
       "      dtype='object')"
      ]
     },
     "execution_count": 29,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.columns"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 37,
   "id": "9248a492",
   "metadata": {},
   "outputs": [],
   "source": [
    "shoe_xm=a.groupby('info.鞋面材质').xse.sum().sort_values(ascending=False)\n",
    "shoe_fg=a.groupby('info.风格').xse.sum().sort_values(ascending=False)\n",
    "shoe_fg=a.groupby('info.流行元素').xse.sum().sort_values(ascending=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 41,
   "id": "e5ccc69d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "info.流行元素\n",
       "车缝线     2877415.92\n",
       "金属       973039.80\n",
       "素面       375973.34\n",
       "皮革拼接      68711.00\n",
       "铆钉        47711.00\n",
       "Name: xse, dtype: float64"
      ]
     },
     "execution_count": 41,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "shoe_fg[0:5]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 40,
   "id": "955c2c2d",
   "metadata": {},
   "outputs": [],
   "source": [
    "data_fg=[]\n",
    "for i in shoe_fg.items():\n",
    "    data_fg.append({\"value\":i[1],\"name\":i[0]})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "844e1b5a",
   "metadata": {},
   "outputs": [],
   "source": [
    "shoes_xiemian=a.groupby(\"info.鞋面材质\").xse.sum().sort_values(ascending=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "9e9004f9",
   "metadata": {},
   "outputs": [],
   "source": [
    "data_xiemian=[]\n",
    "for i in shoes_xiemian.items():\n",
    "    data_xiemian.append({\"name\":i[0],\"value\":i[1]})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "ae0659aa",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[{'name': '头层牛皮（除牛反绒）', 'value': 5344427.22},\n",
       " {'name': '二层牛皮（除牛反绒）', 'value': 53818.4},\n",
       " {'name': '多种材质拼接', 'value': 37366.0},\n",
       " {'name': 'PU', 'value': 18503.5},\n",
       " {'name': '牛反绒', 'value': 9223.0},\n",
       " {'name': '网布', 'value': 6536.0},\n",
       " {'name': '二层猪皮', 'value': 3430.0},\n",
       " {'name': '头层猪皮', 'value': 2409.0}]"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data_xiemian[0:8]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "986979c7",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "info.风格\n",
       "商务      3122703.94\n",
       "休闲      2035391.58\n",
       "青春潮流     192161.80\n",
       "运动        37238.00\n",
       "英伦        33702.00\n",
       "韩版        24796.34\n",
       "简约        19027.50\n",
       "复古         1893.00\n",
       "欧美         1017.00\n",
       "民族风           0.00\n",
       "Name: xse, dtype: float64"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.groupby(\"info.风格\").xse.sum().sort_values(ascending=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "94967da9",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "info.流行元素\n",
       "车缝线     2877415.92\n",
       "金属       973039.80\n",
       "素面       375973.34\n",
       "皮革拼接      68711.00\n",
       "铆钉        47711.00\n",
       "雕花        43632.00\n",
       "镂空        30223.00\n",
       "亮片        13250.00\n",
       "图腾        11633.40\n",
       "绣花         4239.40\n",
       "编制         3296.00\n",
       "皮草装饰       2548.00\n",
       "马衔扣        1730.00\n",
       "奢华马毛       1026.00\n",
       "迷彩            0.00\n",
       "翻边            0.00\n",
       "流苏            0.00\n",
       "Name: xse, dtype: float64"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.groupby(\"info.流行元素\").xse.sum().sort_values(ascending=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "15710cdf",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['_id.$oid', 'info.上市年份季节', 'info.上市时间', 'info.产品名称', 'info.低帮鞋品名',\n",
       "       'info.功能', 'info.吊牌价', 'info.品牌', 'info.图案', 'info.场合', 'info.外底材料',\n",
       "       'info.季节', 'info.尺码', 'info.帮面内里材质', 'info.帮面材质', 'info.性别',\n",
       "       'info.是否商场同款', 'info.是否瑕疵', 'info.款号', 'info.款式', 'info.流行元素',\n",
       "       'info.真皮材质工艺', 'info.细分风格', 'info.货号', 'info.跟底款式', 'info.运动系列',\n",
       "       'info.运动鞋科技', 'info.适合路面', 'info.适用对象', 'info.销售渠道类型', 'info.闭合方式',\n",
       "       'info.靴子品名', 'info.靴筒内里材质', 'info.靴筒材质', 'info.靴筒高度', 'info.鞋制作工艺',\n",
       "       'info.鞋垫材质', 'info.鞋头款式', 'info.鞋底材质', 'info.鞋码', 'info.鞋跟高',\n",
       "       'info.鞋面内里材质', 'info.鞋面材质', 'info.颜色分类', 'info.风格', 'itemid',\n",
       "       'location', 'nick', 'price', 'sales', 'title', 'url', 'xse', 'province',\n",
       "       'city'],\n",
       "      dtype='object')"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.columns"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "11387a72",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "_id.$oid         0\n",
       "info.功能        403\n",
       "info.品牌          5\n",
       "info.图案        209\n",
       "info.场合        312\n",
       "info.季节        273\n",
       "info.尺码          1\n",
       "info.款式         14\n",
       "info.流行元素      480\n",
       "info.细分风格      809\n",
       "info.货号        751\n",
       "info.跟底款式      243\n",
       "info.适用对象      781\n",
       "info.闭合方式        6\n",
       "info.鞋制作工艺     192\n",
       "info.鞋头款式       12\n",
       "info.鞋底材质      218\n",
       "info.鞋跟高       799\n",
       "info.鞋面内里材质     44\n",
       "info.鞋面材质        7\n",
       "info.颜色分类        0\n",
       "info.风格        183\n",
       "itemid           0\n",
       "location         0\n",
       "nick             0\n",
       "price            0\n",
       "sales            0\n",
       "title            0\n",
       "url              0\n",
       "xse              0\n",
       "province         0\n",
       "city           496\n",
       "dtype: int64"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p=a.isnull().sum()\n",
    "p[p<1000]"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d1a4d0d3",
   "metadata": {},
   "source": [
    "## 数据指标的展示\n",
    "\n",
    "* st.columns\n",
    "* st.metric\n",
    "\n",
    "### classwork 5\n",
    "\n",
    "请计算总商品数，总店铺数，总销售额，笔单价等量，然后并列展示在页面最上端"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "7a2402b9",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "4987"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "len(a)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "8bbc49aa",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "482"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "len(a.nick.unique())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "2e3528b8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "5496597"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "round(a.xse.sum())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "214b9bb8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "231"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "round(a.xse.sum()/a.sales.sum())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "147ff2d9",
   "metadata": {},
   "source": [
    "## 页面布局与图片设置\n",
    "\n",
    "### classwork 6\n",
    "\n",
    "1, 请通过st.set_page_config设置宽屏\n",
    "\n",
    "2, 请通过st.columns调整各个图表的布局\n",
    "\n",
    "3，通过st_echarts中的（height=625,width=800,theme='dark'）等参数调整图表的大小与主题"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b2785685",
   "metadata": {},
   "outputs": [],
   "source": [
    "st.set_page_config(page_title=\"column嵌套演示\", layout=\"wide\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "07b924a8",
   "metadata": {},
   "source": [
    "## 设置背景风格，字体颜色，和其他内容\n",
    "\n",
    "* st.markdown\n",
    "\n",
    "https://www.youtube.com/watch?v=pyWqw5yCNdo\n",
    "\n",
    "https://discuss.streamlit.io/t/change-metric-color-font-background-and-style/25309\n",
    "\n",
    "\n",
    "### classwork 7\n",
    "\n",
    "1, 通过st.markdown加入大屏的标题\n",
    "\n",
    "2，设置背景颜色\n",
    "\n",
    "3，通过css设置好看的背景\n",
    "\n",
    "https://www.magicpattern.design/\n",
    "\n",
    "4，引入本地图片作为背景（G:\\anaconda\\Lib\\site-packages\\streamlit\\static）\n",
    "\n",
    "5,  通过定位页面元素，让最上面的导航栏透明；改变指标字体的颜色"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "67608b2a",
   "metadata": {},
   "outputs": [],
   "source": [
    "st.markdown(\"<h1 style='text-align: center; color: white;'>意尔康男鞋数据分析</h1>\", unsafe_allow_html=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "02be03ce",
   "metadata": {},
   "outputs": [],
   "source": [
    "#  background-image: url(\"data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id=%22b%22 x=%220%22 y=%220%22 width=%222000%22 height=%221000%22%3E%3Cpath fill=%22url(%23a)%22 d=%22M0 0h2000v1000H0z%22%2F%3E%3C%2Fmask%3E%3Cpath fill=%22%23000336%22 d=%22M0 0h2000v1000H0z%22%2F%3E%3Cg style=%22transform-origin:center center%22 stroke=%22%234c4e72%22 stroke-width=%222%22 mask=%22url(%23b)%22%3E%3Cpath fill=%22none%22 d=%22M0 0h100v100H0zM100 0h100v100H100zM200 0h100v100H200zM300 0h100v100H300z%22%2F%3E%3Cpath fill=%22%234c4e72a6%22 d=%22M400 0h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 0h100v100H500zM600 0h100v100H600z%22%2F%3E%3Cpath fill=%22%234c4e72f5%22 d=%22M700 0h100v100H700z%22%2F%3E%3Cpath fill=%22%234c4e72ef%22 d=%22M800 0h100v100H800z%22%2F%3E%3Cpath fill=%22%234c4e7296%22 d=%22M900 0h100v100H900z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1000 0h100v100h-100zM1100 0h100v100h-100zM1200 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7297%22 d=%22M1300 0h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 0h100v100h-100zM1500 0h100v100h-100zM1600 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7290%22 d=%22M1700 0h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1800 0h100v100h-100zM1900 0h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e72f6%22 d=%22M0 100h100v100H0z%22%2F%3E%3Cpath fill=%22%234c4e7274%22 d=%22M100 100h100v100H100z%22%2F%3E%3Cpath fill=%22%234c4e7232%22 d=%22M200 100h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 100h100v100H300zM400 100h100v100H400zM500 100h100v100H500zM600 100h100v100H600z%22%2F%3E%3Cpath fill=%22%234c4e7279%22 d=%22M700 100h100v100H700z%22%2F%3E%3Cpath fill=%22none%22 d=%22M800 100h100v100H800z%22%2F%3E%3Cpath fill=%22%234c4e72d5%22 d=%22M900 100h100v100H900z%22%2F%3E%3Cpath fill=%22%234c4e72a3%22 d=%22M1000 100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1100 100h100v100h-100zM1200 100h100v100h-100zM1300 100h100v100h-100zM1400 100h100v100h-100zM1500 100h100v100h-100zM1600 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7212%22 d=%22M1700 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e728b%22 d=%22M1800 100h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 100h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e72a5%22 d=%22M0 200h100v100H0z%22%2F%3E%3Cpath fill=%22none%22 d=%22M100 200h100v100H100z%22%2F%3E%3Cpath fill=%22%234c4e720e%22 d=%22M200 200h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 200h100v100H300z%22%2F%3E%3Cpath fill=%22%234c4e72d9%22 d=%22M400 200h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 200h100v100H500zM600 200h100v100H600zM700 200h100v100H700z%22%2F%3E%3Cpath fill=%22%234c4e7247%22 d=%22M800 200h100v100H800z%22%2F%3E%3Cpath fill=%22%234c4e72ea%22 d=%22M900 200h100v100H900z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1000 200h100v100h-100zM1100 200h100v100h-100zM1200 200h100v100h-100zM1300 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e723a%22 d=%22M1400 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e728c%22 d=%22M1500 200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 200h100v100h-100zM1700 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7288%22 d=%22M1800 200h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 200h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e720e%22 d=%22M0 300h100v100H0z%22%2F%3E%3Cpath fill=%22%234c4e72de%22 d=%22M100 300h100v100H100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M200 300h100v100H200zM300 300h100v100H300zM400 300h100v100H400z%22%2F%3E%3Cpath fill=%22%234c4e7292%22 d=%22M500 300h100v100H500z%22%2F%3E%3Cpath fill=%22none%22 d=%22M600 300h100v100H600zM700 300h100v100H700zM800 300h100v100H800zM900 300h100v100H900zM1000 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e72c2%22 d=%22M1100 300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 300h100v100h-100zM1300 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7269%22 d=%22M1400 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7245%22 d=%22M1500 300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e72c2%22 d=%22M1700 300h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1800 300h100v100h-100zM1900 300h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e72df%22 d=%22M0 400h100v100H0z%22%2F%3E%3Cpath fill=%22%234c4e72be%22 d=%22M100 400h100v100H100z%22%2F%3E%3Cpath fill=%22%234c4e7210%22 d=%22M200 400h100v100H200z%22%2F%3E%3Cpath fill=%22%234c4e7266%22 d=%22M300 400h100v100H300z%22%2F%3E%3Cpath fill=%22%234c4e720c%22 d=%22M400 400h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 400h100v100H500zM600 400h100v100H600zM700 400h100v100H700zM800 400h100v100H800z%22%2F%3E%3Cpath fill=%22%234c4e72de%22 d=%22M900 400h100v100H900z%22%2F%3E%3Cpath fill=%22%234c4e7296%22 d=%22M1000 400h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1100 400h100v100h-100zM1200 400h100v100h-100zM1300 400h100v100h-100zM1400 400h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7290%22 d=%22M1500 400h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 400h100v100h-100zM1700 400h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7278%22 d=%22M1800 400h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 400h100v100h-100zM0 500h100v100H0zM100 500h100v100H100zM200 500h100v100H200z%22%2F%3E%3Cpath fill=%22%234c4e72a9%22 d=%22M300 500h100v100H300z%22%2F%3E%3Cpath fill=%22none%22 d=%22M400 500h100v100H400zM500 500h100v100H500zM600 500h100v100H600z%22%2F%3E%3Cpath fill=%22%234c4e7289%22 d=%22M700 500h100v100H700z%22%2F%3E%3Cpath fill=%22%234c4e72b6%22 d=%22M800 500h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 500h100v100H900zM1000 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e72a5%22 d=%22M1100 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7237%22 d=%22M1300 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 500h100v100h-100zM1500 500h100v100h-100zM1600 500h100v100h-100zM1700 500h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7271%22 d=%22M1800 500h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1900 500h100v100h-100zM0 600h100v100H0zM100 600h100v100H100zM200 600h100v100H200z%22%2F%3E%3Cpath fill=%22%234c4e7270%22 d=%22M300 600h100v100H300z%22%2F%3E%3Cpath fill=%22none%22 d=%22M400 600h100v100H400zM500 600h100v100H500zM600 600h100v100H600zM700 600h100v100H700z%22%2F%3E%3Cpath fill=%22%234c4e725f%22 d=%22M800 600h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 600h100v100H900z%22%2F%3E%3Cpath fill=%22%234c4e722a%22 d=%22M1000 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e729a%22 d=%22M1100 600h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 600h100v100h-100zM1300 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e720f%22 d=%22M1400 600h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1500 600h100v100h-100zM1600 600h100v100h-100zM1700 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7241%22 d=%22M1800 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e723e%22 d=%22M1900 600h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7276%22 d=%22M0 700h100v100H0z%22%2F%3E%3Cpath fill=%22none%22 d=%22M100 700h100v100H100z%22%2F%3E%3Cpath fill=%22%234c4e7297%22 d=%22M200 700h100v100H200z%22%2F%3E%3Cpath fill=%22none%22 d=%22M300 700h100v100H300zM400 700h100v100H400zM500 700h100v100H500zM600 700h100v100H600z%22%2F%3E%3Cpath fill=%22%234c4e729f%22 d=%22M700 700h100v100H700z%22%2F%3E%3Cpath fill=%22%234c4e7203%22 d=%22M800 700h100v100H800z%22%2F%3E%3Cpath fill=%22none%22 d=%22M900 700h100v100H900zM1000 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e728a%22 d=%22M1100 700h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1200 700h100v100h-100zM1300 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7271%22 d=%22M1400 700h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1500 700h100v100h-100zM1600 700h100v100h-100zM1700 700h100v100h-100zM1800 700h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e724e%22 d=%22M1900 700h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 800h100v100H0z%22%2F%3E%3Cpath fill=%22%234c4e7294%22 d=%22M100 800h100v100H100z%22%2F%3E%3Cpath fill=%22%234c4e72ad%22 d=%22M200 800h100v100H200z%22%2F%3E%3Cpath fill=%22%234c4e728b%22 d=%22M300 800h100v100H300z%22%2F%3E%3Cpath fill=%22%234c4e7272%22 d=%22M400 800h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 800h100v100H500zM600 800h100v100H600zM700 800h100v100H700zM800 800h100v100H800zM900 800h100v100H900zM1000 800h100v100h-100zM1100 800h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e72cd%22 d=%22M1200 800h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1300 800h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7256%22 d=%22M1400 800h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e729a%22 d=%22M1500 800h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 800h100v100h-100zM1700 800h100v100h-100zM1800 800h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e720b%22 d=%22M1900 800h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 900h100v100H0zM100 900h100v100H100zM200 900h100v100H200zM300 900h100v100H300z%22%2F%3E%3Cpath fill=%22%234c4e72af%22 d=%22M400 900h100v100H400z%22%2F%3E%3Cpath fill=%22none%22 d=%22M500 900h100v100H500z%22%2F%3E%3Cpath fill=%22%234c4e7286%22 d=%22M600 900h100v100H600z%22%2F%3E%3Cpath fill=%22none%22 d=%22M700 900h100v100H700zM800 900h100v100H800zM900 900h100v100H900zM1000 900h100v100h-100zM1100 900h100v100h-100zM1200 900h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7231%22 d=%22M1300 900h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1400 900h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e7208%22 d=%22M1500 900h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1600 900h100v100h-100z%22%2F%3E%3Cpath fill=%22%234c4e72ce%22 d=%22M1700 900h100v100h-100z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1800 900h100v100h-100zM1900 900h100v100h-100z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CradialGradient id=%22a%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22%2F%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0aea43bf",
   "metadata": {},
   "outputs": [],
   "source": [
    "bg_img=\"\"\"\n",
    "<style>\n",
    "[data-testid=\"stAppViewContainer\"]{\n",
    "  width: 100%;\n",
    "  height: 100%;\n",
    "  background-size: cover;\n",
    "  background-position: center center;\n",
    "  background-repeat: repeat;\n",
    "  background-image: url(\"./xing.png\")\n",
    "    }\n",
    "\n",
    "[data-testid=\"stHeader\"]{\n",
    "    background-color:rgba(0, 0, 0, 0)\n",
    "    }\n",
    "\n",
    "[data-testid=\"metric-container\"] {\n",
    "   background-color: rgba(28, 131, 225, 0.1);\n",
    "   border: 1px solid rgba(28, 131, 225, 0.1);\n",
    "   padding: 5% 5% 5% 10%;\n",
    "   border-radius: 5px;\n",
    "   color: rgb(30, 103, 119);\n",
    "   overflow-wrap: break-word;\n",
    "}\n",
    "\n",
    "/* breakline for metric text         */\n",
    "[data-testid=\"metric-container\"] {\n",
    "   overflow-wrap: break-word;\n",
    "   white-space: break-spaces;\n",
    "   color: white;\n",
    "}\n",
    "</style>\n",
    "\"\"\"\n",
    "st.markdown(bg_img, unsafe_allow_html=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1ba96e01",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.12"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {
    "height": "calc(100% - 180px)",
    "left": "10px",
    "top": "150px",
    "width": "279.273px"
   },
   "toc_section_display": true,
   "toc_window_display": true
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
